<template>
  <div style="width:100%;height:100%">
    <div class="title flex-row">
      <span class="date">数据更新时间:</span>
      <span class="m-l-5">{{ updateTime }}</span>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="height:100%;width: 100%"
      >
        <el-table-column
          label="测点名称"
          prop="sensorName"
          min-width="10%"
          show-overflow-tooltip
        />
        <el-table-column
          label="水压/kpa"
          min-width="17%"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>{{ scope.row.monitorHpVal }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="流量 m³/h"
          min-width="20%"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>{{ scope.row.monitorFlowVal }}{{ scope.row.hydrUnit }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="预警状态"
          min-width="14%"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.state ==1">
              <span v-if="scope.row.level ==0" class="blueColor">
                无预警
              </span>
              <span v-else class="redColor">有预警</span>
            </div>
            <div v-else>
              <span class="redColor">故障</span>
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          label="查看曲线"-->
        <!--          min-width="10%"-->
        <!--          show-overflow-tooltip-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <img-->
        <!--              class="ys"-->
        <!--              src="@/assets/img/ys.png"-->
        <!--              alt=""-->
        <!--              srcset=""-->
        <!--              @click="showDlgEcharts(scope.row.sensorCode)"-->
        <!--            >-->
        <!--          </template>-->

        <!--        </el-table-column>-->
      </el-table>
    </div>
    <div class="page-wrap">
      <el-pagination
        background
        :page-sizes="pageInfo.sizeList"
        :current-page="pageInfo.pageNum"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <Dlgdiv
      v-if="$store.getters.dlgName === '密闭墙监测曲线'"
      style="width: 90%; height: 90%; left: 5%; top: 5%"
    >
      <template v-slot:title>密闭墙监测曲线</template>
      <template v-slot:body>
        <DlgWall :mp-id="mpId" />
      </template>
    </Dlgdiv>
  </div>
</template>

<script>
import MixinPage from '@/views/components/MixinPage'
import DlgWall from './dlgWall'
export default {
    name: '',
    components: {
        DlgWall
    },
    mixins: [MixinPage],
    data() {
        return {
            isLoading: false,
            updateTime: '',
            tableData: [],
            mpId: ''
        }
    },
    computed: {},
    created() {
        this.getData()
    },
    methods: {
        async getData() {
            this.isLoading = true
        },
        showDlgEcharts(id) {
            this.mpId = id
            this.$store.dispatch('dlgName', '密闭墙监测曲线')
        }
    }
}
</script>

<style lang='scss' scoped>
.title{
 height: 50px;
  color: #fff;
}
.table{
  height: calc(100% - 130px);
}
.ys{
 width: 20px;
 height: 20px;
}
</style>
